<template>
    <sky-base-page ref="skyBasePageRef" padding="24rpx 0 0" bg-page-color="#f5f5f5">
        <view>
            
            <up-card :show-head="false" margin="0 24rpx">
                <template #body>
                    <up-input v-model="form.name" placeholder="请输入收货人" border="bottom">
                        <template #prefix>
                            收货人
                        </template>
                    </up-input>
                    <up-gap></up-gap>
                    <up-input v-model="form.mobile" placeholder="请输入手机号" border="bottom">
                        <template #prefix>
                            手机号
                        </template>
                    </up-input>
                    <up-gap></up-gap>
                    <up-input v-model="addressText" placeholder="请选择地区" border="bottom" disabled>
                        <template #prefix>
                            地区
                        </template>
                        <template #suffix>
                            <up-icon name="map" color="#b07f63" size="24" @tap="chooseLocation"></up-icon>
                        </template>
                    </up-input>
                    <up-gap></up-gap>
                    <up-input v-model="form.address" placeholder="请输入详细地址" type="textarea" border="bottom">
                        <template #prefix>
                            详细地址
                        </template>
                    </up-input>
                    <up-checkbox label="默认地址" name="agree"
                                 :customStyle="{marginTop: '24rpx'}"
                                 usedAlone v-model:checked="form.default">
                    </up-checkbox>
                </template>
            
            </up-card>
        </view>
        
        <template #footer>
            <up-button type="primary" shape="circle" color="#b07f63" text="新增地址"
                       @tap="confirm"></up-button>
        </template>
    </sky-base-page>
</template>
<script setup>

const skyBasePageRef = ref()

const addressText = ref('')
const form = ref({
    name: '',
    mobile: '',
    province: '',
    city: '',
    area: '',
    address: '',
    longitude: '',
    latitude: '',
    default: false,
})

const chooseLocation = () => {
    uni.chooseLocation({
        success: function (res) {
            console.log('位置名称：' + res.name);
            console.log('详细地址：' + res.address);
            console.log('纬度：' + res.latitude);
            console.log('经度：' + res.longitude);
            form.value.longitude = res.longitude
            form.value.latitude = res.latitude
            
            form.value.address = res.name + res.address
            getRegeo(res)
        }
    });
}

// 经纬度转省市区
const getRegeo = async () => {
    const location = form.value.longitude + ',' + form.value.latitude
    
    const res = await qly.api.user.address.regeo({location})
    if (res.code === 1) {
        const data = res.data.regeocode.addressComponent
        addressText.value = data.province + data.city + data.district
        form.value.province = data.province
        form.value.city = data.city
        form.value.area = data.district
    } else {
        qly.dialog.apiError(res).catch()
    }
}

// 确认添加
const confirm = async () => {
    const data = qly.tool.deepCopy(form.value)
    data.default = data.default ? 1 : 0
    
    let res = null
    if (data.id) {
        res = await qly.api.user.address.edit(data)
    } else {
        res = await qly.api.user.address.add(data)
    }
    if (res.code === 1) {
        uni.navigateBack()
        uni.$emit('addressRefresh')
        qly.dialog.success(data.id ? '修改成功' : '添加成功').catch()
    } else {
        qly.dialog.apiError(res).catch()
    }
}

// 获取地址信息
const getAddressInfo = async () => {
    const res = await qly.api.user.address.info({id: qly.page.params.id})
    if (res.code === 1) {
        form.value = {
            id: res.data.id,
            name: res.data.name,
            mobile: res.data.mobile,
            province: res.data.province,
            city: res.data.city,
            area: res.data.area,
            address: res.data.address,
            longitude: res.data.longitude,
            latitude: res.data.latitude,
            default: res.data.default === '1',
        }
        addressText.value = res.data.province + res.data.city + res.data.area
    } else {
        qly.dialog.apiError(res).catch()
    }
}
qly.page.onLoad(() => {
    if (qly.page.params.id) {
        getAddressInfo()
    }
})
</script>
<style scoped lang="scss">
.search-box {
    padding: 24rpx;
    box-sizing: border-box;
    background-color: #fff;
}
</style>
